<template>
  <div class="vip_add">
    <div class="page_top">
      <div class="top_info">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item >首页</el-breadcrumb-item>
          <el-breadcrumb-item>会员管理</el-breadcrumb-item>
          <el-breadcrumb-item>添加会员</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="info_title">添加会员</div>
      </div>
      <div class="go_back">
         <el-button @click="$router.push(`/vip`)" size="medium">返回</el-button>
      </div>
    </div>
    <div v-loading="isLoading"
        element-loading-text="提交中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)" class="page_con">
      <el-form :model="ruleForm" label-width="110px" status-icon :rules="rules" ref="ruleForm" @submit.native.prevent  class="content_ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input  type="text" size="small" v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input  type="text" size="small" v-model="ruleForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="微信号为手机号" prop="wechatIsPhone">
          <el-switch v-model="ruleForm.wechatIsPhone"></el-switch>
        </el-form-item>
        <el-form-item label="微信号" prop="wechatId" >
          <el-input   type="text" size="small" v-if="!ruleForm.wechatIsPhone"  v-model="ruleForm.wechatId" autocomplete="off"></el-input>
          <p v-else style="color:#606266">同手机号</p>
        </el-form-item>
        <el-form-item label="套餐类型" prop="setmeal">
          <el-select v-model="ruleForm.setmeal" size="small" filterable  placeholder="请选择套餐类型">
            <el-option v-for="item in setmealList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="余额" prop="balance" style="width:300px" class="ban_div"  >
           <el-input-number v-model="ruleForm.balance" controls-position="right" size="small" :step="100"  :min="0" ></el-input-number>
        </el-form-item>
        <el-form-item label="自定义标签" class="tag_con" prop="remark">
          <div class="tag_wrap">
            <el-tag
              size="medium"
              :key="index"
              v-for="(tag,index) in ruleForm.remark"
              closable
              :disable-transitions="true"
              @close="delTag(tag)">
              {{tag}}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="tagInputShow"
              v-model="tagInputVal"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="saveTag"
              @blur="saveTag"
            >
              <!-- -->
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增</el-button>
          </div>
        </el-form-item>
        <el-form-item label="到期时间" prop="overDate">
          <el-date-picker
            v-model="ruleForm.overDate"
            type="datetime"
            placeholder="选择到期时间"
            size="small"
            align="left"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
         <el-form-item class="submit_btn">
          <el-button type="primary"  :loading="isLoading" native-type="submit" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations } from "vuex";
import moment from 'moment'
export default {
  name: "vip-add",
  data(){
    let wechatIdValidate = (rule, value, callback) => {
      //value 当前输入值， callback()回调函数，必须调用，说明检验完成 参数 new Error('错误提示')
      if (value === ''&& !this.ruleForm.wechatIsPhone) {
        callback(new Error('请输入微信号'));
      } else {
        callback();
      }
    };
    let phoneValidate = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'));
      } else if(!(/^1[3456789]\d{9}$/.test(value))){
        callback(new Error('请输入正确手机号'));
      }else{
        callback();
      }
    };
    return {
      setmealList:[
        {
          id:'1',
          name:'护肤',
        },
        {
          id:'2',
          name:'中医按摩',
        },
        {
          id:'3',
          name:'彩光',
        },
        {
          id:'4',
          name:'头部理疗',
        },
        {
          id:'5',
          name:'其他',
        } 
      ],
      tagInputShow:false,  //自定义标签input是否显示
      tagInputVal:'',      //自定义标签input值
      isLoading:false,    //按钮是否加载中
      ruleForm:{
        name:'',
        phone:'',
        wechatId:'',
        wechatIsPhone:false,
        setmeal:'',
        overDate:'',
        balance:0,
        remark:[],
      },
      rules: {      //element 表单规则校验 定义在date里 el-form :rules使用 具体官方文档
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, validator: phoneValidate, trigger: 'blur' }
        ],
        wechatId: [     //validator 自定义校验规则 需在data里定义，这里使用
          {  validator: wechatIdValidate, trigger: 'blur' }
        ],
        setmeal: [
          { required: true, message: '请选择套餐类型', trigger: 'change' }
        ],
        overDate: [
          { required: true, message: '请选择到期时间', trigger: 'change' }
        ],
      },
      pickerOptions: {
        disabledDate(time){
          return time.getTime() < Date.now() - 8.64e7;    //禁用今天以前得日期
        },
        shortcuts: [{
          text: '一月后',
          onClick(picker) {
            const date = moment().add(1, 'months').format('YYYY-MM-DD HH:mm:ss')
            picker.$emit('pick', date);
          }
        }, {
          text: '三月后',
          onClick(picker) {
            const date = moment().add(3, 'months').format('YYYY-MM-DD HH:mm:ss')
            picker.$emit('pick', date);
          }
        }, {
          text: '六月后',
          onClick(picker) {
            const date = moment().add(6, 'months').format('YYYY-MM-DD HH:mm:ss')
            picker.$emit('pick', date);
          }
        }, {
          text: '一年后',
          onClick(picker) {
            const date = moment().add(1, 'years').format('YYYY-MM-DD HH:mm:ss')
            picker.$emit('pick', date);
          }
        }]
      }
    }
  },
  created(){
  },
  computed:{
    ...mapGetters({
      userInfo:"getUserInfo",
    }),
    
  },
  methods:{
    // ...mapMutations({
    // }),
    //提交表单 
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //调接口之后成功失败提示
          this.isLoading=true
          setTimeout(() => {
            if(Math.random() >= 0.5){
              this.$message({
                message: '添加成功',
                type: 'success'
              });
            }else{
              this.$message({
                message: '添加失败！',      //或者后台返回
                type: 'error'
              });
            }
            this.isLoading=false;
          }, 2000);
        } else {
          //校验规则不通过 
          return false;
        }
      });
    },
    delTag(tag) {
        this.ruleForm.remark.splice(this.ruleForm.remark.indexOf(tag), 1);
      },
    saveTag(){
      let tagInputVal = this.tagInputVal;
      if (tagInputVal) {
        this.ruleForm.remark.push(tagInputVal);
      }
      this.tagInputShow = false;
      this.tagInputVal = '';
    },
    showInput() {
      this.tagInputShow = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
  },
}
</script>
<style lang="scss" scoped>
 .vip_add{
  ::v-deep .ban_div{
    .el-form-item__content{
      max-width: 100%;
      // .edit_ban{
      //   color: #4395FF;
      //   margin-left: 10px;
      //   cursor: pointer;
      //   user-select: none;
      // }
    }
  } 
  ::v-deep .tag_con{
    .el-form-item__content{
      max-width: 80%;
    }
  }
}
.tag_wrap{
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>